<template>
    <el-card shadow="hover">
        <el-divider></el-divider>
        <el-table
                :data="students"
                style="width: 100%">
            <el-table-column
                    label="学号"
                    prop="sid"
                    align="center"
                    width="130">
            </el-table-column>
            <el-table-column
                    label="姓名"
                    prop="sname"
                    align="center"
                    width="130">
            </el-table-column>
            <el-table-column
                    label="性别"
                    prop="sex"
                    align="center"
                    width="130">
            </el-table-column>
            <el-table-column
                    label="年龄"
                    prop="age"
                    align="center"
                    width="130">
            </el-table-column>
            <el-table-column
                    label="地址"
                    prop="addr"
                    align="center"
                    width="130">
            </el-table-column>
            <el-table-column
                    label="所在班级"
                    prop="cname"
                    align="center"
                    width="130">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-card>
</template>

<script>
    export default {
        name: "list",
        data() {
            return {
                students: [],   //当前学生列表
                page:1,         //当前页
                pagesize:5,     //每页大小
                total:10        //总记录数
            }
        },
        created() {
            //1. 查询所有学生
            // this.findStudents();
            //2. 分页查询
            this.findByPage();
        },
        methods: {
            //1. 查询所有学生
            findStudents(){
                this.$axios.get("/student?cmd=list").then(resp=>{
                    this.students = resp.data
                })
            },
            //2. 分页查询
            findByPage(){
                this.$axios.get(`/student?cmd=findByPage&page=${this.page}&pagesize=${this.pagesize}`).then(resp=>{
                    this.total = resp.data.total;
                    this.students = resp.data.rows;
                })
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            //每页大小改变是触发
            handleSizeChange(val) {
                this.pagesize = val;
                this.findByPage()
                console.log(`每页 ${val} 条`);
            },
            //当前也改变时触发
            handleCurrentChange(val) {
                this.page = val;
                this.findByPage();
                console.log(`当前页: ${val}`);
            }
        }
    }

</script>

<style scoped>
    .el-pagination{
        text-align: right;
        margin-top: 10px;
    }
</style>